<template>
    <div>

    <div v-show="ad==1">
        <el-form :inline="true" :model="expresstype" class="demo-form-inline">
            <el-form-item >
                <el-input v-model="expresstype.expressName" size="small" placeholder="快件类型"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getall" size="small" >查询</el-button>
                <el-button type="primary" @click="GetExpType" size="small" >添加</el-button>

            </el-form-item>
        </el-form>
        <el-table :data="expresstypes" height="200" border style="width: 100%">
        <el-table-column label="快件类型" prop="expressName"></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-dropdown>
                    <el-button type="primary" size="small">
                        操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item size="small" @click.native="UpExpType(scope)">修改</el-dropdown-item>
                        <el-dropdown-item size="small" @click.native="del(scope)">删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </template>
        </el-table-column>
    </el-table>
    </div>
    <div v-if="ad==2">
        <el-form :model="expresstyp" :rules="rules"
                 ref="recordForm"
                 class="demo-ruleForm">
            <el-form-item label="快件名：" prop="uname">
                <el-input v-model="expresstyp.expressName" size="small" placeholder="快件名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addexptype('recordForm')" :disabled="disable" size="small" >提交</el-button>
                <el-button type="primary" @click="coles" size="small" >取消</el-button>
            </el-form-item>
        </el-form>
    </div>
    </div>
</template>

<script>
    import express from "../../../model/gsl/ExpressType/expresstype";
    const exp=express.getInstance();
    export default {
        name: "ExpressType",
        data(){
            var uname = (rule, value, callback) => {
                value=this.expresstyp.expressName;
                if (!value) {
                    this.disable=true;
                    callback(new Error('快件类型名称'));
                } else {
                    callback();
                    this.disable=false;
                }
            };
            return{
                expresstypes:[],
                expresstype:{},
                expresstyp:{},
                ad:1,
                disable:true,
                rules: {
                    uname: [{ required: true,validator: uname, trigger: 'blur' }],
                }
            }
        },
        created(){
            this.getall();
        },
        methods: {
            getall(){
                exp.list(this.expresstype).then((re)=>{
                    this.expresstype={}
                    this.expresstypes=re.data.data;
                })
            },
            del(so){
                exp.remove(so.row.id).then((re)=>{
                    if (re.data.data==1) {
                        alert("删除成功！");
                        this.getall();
                    }else {
                        alert("删除失败！")
                        this.getall();
                    }
                })
            },
            GetExpType(){
                this.expresstyp={}
                this.ad=2;
            },
            UpExpType(ss){
                this.ad=2;
                exp.listByid(ss.row.id).then((re)=>{
                    this.expresstyp={}
                   this.expresstyp=re.data.data;
                })
            },
            coles(){
                this.ad=1;
            },
            addexptype(formName){
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            console.log(this.expresstyp);
                            if (!this.expresstyp.id) {
                                exp.update(this.expresstyp).then((re)=>{
                                    if (re.data.data==1) {
                                        alert("修改成功！");
                                        this.getall();
                                        this.ad=1;
                                    }else {
                                        alert("修改失败！")
                                        this.ad=2;
                                    }
                                })
                            }else {
                                exp.save(this.expresstyp).then((re)=>{
                                    if (re.data.data==1) {
                                        alert("添加成功！");
                                        this.getall();
                                        this.ad=1;
                                    }else {
                                        alert("添加失败！")
                                        this.ad=2;
                                    }
                                 })
                            }
                            this.expresstyp={};
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });

            }
        }
    }
</script>

<style scoped>

</style>